<template>
	<view class="timebox">
		<view class="">
			
			<text> 已读 {{ parseInt(redTime) }} % </text>
		</view>
		
		<view class="icons">
			<uni-icons type="arrowleft" size="30"></uni-icons>
			<slider class="sliders"  size="15" @change="sliderChange" block-color="#555555" activeColor="#FF0000" :value="redTime"  />
			<uni-icons type="arrowright" size="30"></uni-icons>
		</view>
		
		<view class="">
			<text>1.1新物种文明</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				redTime:0
			}
		},
		methods: {
			sliderChange(value) {
				this.redTime = value.detail.value
				this.$bus.$emit( 'redTime',this.redTime)
			},
			// 注意这里的滚动检测算法
			scolorListen(value){
				value =  parseInt(value)
				if( value < 6454 ){
					this.redTime = value / 77
				}	else {
					this.redTime =  ( value / 77 ) / 2
				}
			
			}},
		
	}
</script>

<style  lang="scss" scoped>
.timebox{
	display:flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	.icons{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		width: 100%;
	}
	.sliders{
		width: 100%;
	}
}
</style>